<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酷炫打字通</title>
    <!-- 先引用公共样式在引入其他的css -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/h.css">
</head>

<body>
    <audio controls autoplay loop style="display:none">
        <source src="./mp3/background.mp3" type="audio/mpeg" />
    </audio>
    <!-- 背景音乐 -->
    <div class="keyboard shadow">
        <!-- 第一排键位 -->
        <!-- 名称不能以数字开头 -->
        <ul>
            <li class="little u you">~</li>
            <li class="little you">f1</li>
            <li class="ring you">f2</li>
            <li class="middle you">f3</li>
            <li class="forefinger1st you">f4</li>
            <li class="forefinger2nd you">f5</li>
            <li class="forefinger2nd you">f6</li>
            <li class="forefinger1st you">f7</li>
            <li class="middle you">f8</li>
            <li class="ring you">f9</li>
            <li class="little you">f10</li>
            <li class="little you">f11</li>
            <li class="little insert you" id="INSERT">INSERT</li>
            <li class="little prtsc you" id="PRTSC">PRTSC</li>
            <li class="little delete you" id="DELETE">DELETE</li>
        </ul>
        <!-- 第二排键位 -->
        <ul>
            <li class="little esc you" id="ESC">ESC</li>
            <li class="little you" id="n1">1</li>
            <li class="ring you" id="n2">2</li>
            <li class="middle you" id="n3">3</li>
            <li class="forefinger1st you" id="n4">4</li>
            <li class="forefinger2nd you" id="n5">5</li>
            <li class="forefinger2nd you" id="n6">6</li>
            <li class="forefinger1st you" id="n7">7</li>
            <li class="middle you" id="n8">8</li>
            <li class="ring you" id="n9">9</li>
            <li class="little you" id="n0">0</li>
            <li class="little a you">-</li>
            <li class="little b you">+</li>
            <li class="little back you">BACK</li>
        </ul>
        <!-- 第三排键位 -->
        <ul>
            <li class="little tab you" id="TAB">TAB</li>
            <li class="little you" id="Q">Q</li>
            <li class="ring you" id="W">W</li>
            <li class="middle you" id="E">E</li>
            <li class="forefinger1st you" id="R">R</li>
            <li class="forefinger2nd you" id="T">T</li>
            <li class="forefinger2nd you" id="Y">Y</li>
            <li class="forefinger1st you" id="U">U</li>
            <li class="middle you" id="I">I</li>
            <li class="ring you" id="O">O</li>
            <li class="little you" id="P">P</li>
            <li class="little you">[</li>
            <li class="little you">]</li>
            <li class="little you">\</li>
        </ul>
        <!-- 第四排键位 -->
        <ul>
            <li class="little caps you">CAPS</li>
            <li class="little you" id="A">A</li>
            <li class="ring you" id="S">S</li>
            <li class="middle you" id="D">D</li>
            <li class="forefinger1st you" id="F">F</li>
            <li class="forefinger2nd you" id="G">G</li>
            <li class="forefinger2nd you" id="H">H</li>
            <li class="forefinger1st you" id="J">J</li>
            <li class="middle you" id="K">K</li>
            <li class="ring you" id="L">L</li>
            <li class="little you">:</li>
            <li class="little you">''</li>
            <li class="little enter you" id="ENTER">ENTER</li>
        </ul>
        <!-- 第五排键位 -->
        <ul>
            <li class="little shift you" id="SHIFT">SHIFT</li>
            <li class="little you" id="Z">Z</li>
            <li class="ring you" id="X">X</li>
            <li class="middle you" id="C">C</li>
            <li class="forefinger1st you" id="V">V</li>
            <li class="forefinger2nd you" id="B">B</li>
            <li class="forefinger2nd you" id="N">N</li>
            <li class="forefinger1st you" id="M">M</li>
            <li class="middle you">,</li>
            <li class="ring you">.</li>
            <li class="little you">;</li>
            <li class="little shift you">SHIFT</li>
        </ul>
    </div>
    <script src="js/h.js"></script>
    <!-- 脚本js引入 -->
</body>

</html>